<template>
  <div>
	  <el-container style="height: 100vh;"class="bg-container">
        <el-header height="55px" style="padding: 0;background-color: #fff5e9; display: flex; flex-direction: row; border-bottom: 1px solid #c6c9d0; min-width: 1400px;">
			<div style="align-self: center;flex: 2;"></div>
			<div style="background-color: #d3d3d3; flex: 6;">
				<el-menu
				router
				:default-active="activeMenuPath"
				style="height: 55px; background-color: #fff5e9;"
				mode="horizontal"
				:ellipsis="false"
				@select="handleSelect"
        class="custom-menu"
        active-text-color="#white"
				>
					<el-menu-item index="/" >首页</el-menu-item>
					<el-menu-item index="/goods?categoryId=-1">全部商品</el-menu-item>
					<el-menu-item index="/orders">我的订单</el-menu-item>
					<el-menu-item index="/user">个人中心</el-menu-item>
					<el-menu-item index="/welcome">社区服务</el-menu-item>
				</el-menu>
			</div>

			<div style="align-self: center;flex: 4; margin-left: 60px;">
				<el-input style="height: 40px;" v-model="SearchKey" placeholder="请输入想了解的商品名称">
					<template #append>
					        <el-button :icon="Search" @click="searchthing()" plain style="width: 55px; height: 40px; border-radius: 0 5px 5px 0; background-color:#f8c27f; color: #ffffff;"/>
					</template>
				</el-input>
			</div>

			<div style="flex: 1;"></div>
			<div style="flex: 1; align-self: center;" @click="user">
			    <el-popover
			        :visible="visible"
			        placement="bottom"
			        :title="hello"
			        :width="200"
			        content="欢迎使用本系统"
			      >
			        <template #reference>
			          <el-avatar v-if="log" :src="headimg" @mouseenter="visible = ture"/>
					  <el-avatar v-else :icon="UserFilled" @mouseenter="visible = ture"/>

			        </template>
			      </el-popover>
			</div>
				<div style="flex: 3; align-self: center; ">
					<el-button style="margin-right: 10px; background-color:#f8c27f;color: white" type="primary" circle plain @click="cart">
						 <el-icon size="large" style="margin-right: 2px;"><ShoppingCart /></el-icon>
					</el-button>
					<span style="margin-left: 10px;margin-right: 20px; color: #cccccc; font-size: 1.5rem; cursor: default;">|</span>
					<a v-if="log" @click="logout" class="quit" style="cursor: pointer; ">退出登录</a>
					<a v-else href="/login" class="login">用户登录</a>
					<!--<a @click="logout">退出</a>-->

			</div>
		</el-header>
        <el-main style=" display: flex; flex-direction: column; padding: 0; min-width: 1400px;" >
			<router-view></router-view>
		</el-main>
      </el-container>
  </div>
</template>

<script setup>
import { activeMenu } from '@/router'
import { UserFilled } from '@element-plus/icons-vue'
import { Search,ShoppingCart } from '@element-plus/icons-vue'
import { reactive, ref,watch } from 'vue';
import router from '@/router';
import { useRoute } from 'vue-router';
import {get,post} from '@/plugins/axios'
import { getPath, setCookiesFromObject,getCookieForObject} from '@/util';
import VueCookie from 'vue-cookie';
import { ElMessage, ElMessageBox } from 'element-plus';
import { copy } from 'copy-anything'
const activeMenuPath = ref(activeMenu)
console.log(activeMenuPath.value)
const route = useRoute()
const SearchKey = ref('')
const SearchKey0 = ref('')
const log = ref()
const visible = ref(false)
const usera = reactive({
  id: '',
	username: '',
  nickname: '',
  age: 0,
	gender: null,
	phone: '',
	email: '',
	account:0,
  water:0,
  gas:0,
  electricity:0,
	file: null,
  address:''
})

const headimg =ref()
const hello =ref()
loginOrNot()
function loginOrNot(){
	const token = VueCookie.get('token')
	if(token){
		log.value=true
		if(VueCookie.get('user')){
			init()
		}
		else getByToken()
	}
	else{
		log.value=false
	}
}
function init(){
	const userinfo= getCookieForObject('user')
	if (userinfo) {
		for (const key in usera) {
			if (Object.prototype.hasOwnProperty.call(userinfo, key)) {
				usera[key] = userinfo[key];
			}
		}
		if(userinfo.file){
			headimg.value=getPath(userinfo.file)
		}
			hello.value="您好，亲爱的 "+usera.username
	}
	else{
		hello.value="您还未登录"
	}
}
function logout(){
    ElMessageBox.confirm(
        '是否退出登录',
        'Warning',
        {
          confirmButtonText: '退出',
          cancelButtonText: '再想想',
          type: 'warning',
        }
      )
        .then(() => {
			window.sessionStorage.clear();
			VueCookie.delete('token');
			VueCookie.delete('user');
			const token0 = VueCookie.get('token')
			if(token0!==null){
				ElMessage({
				  type: 'error',
				  message: '退出登录失败',
				})
				loginOrNot()
			}
			else{
				ElMessage({
            type: 'success',
            message: '您已退出登录',
          })
		  router.push({ name: 'Indexmainfooter' })
		  loginOrNot()
		  hello.value=''
		  //getByToken()
		  }

        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '您已放弃退出登录',
          })
        })
}

function searchthing(){
	if(SearchKey.value.trim()!==''){
		SearchKey0.value=copy(SearchKey.value)
		router.push({
			path:'/goods',
			query:{SearchKey:SearchKey0.value,categoryId:-1}
		})
		SearchKey.value=''
	}
	else{
		router.push({
			path:'/goods',
			query:{categoryId:-1}
		})
	}

}
function cart(){
	router.push({ name: 'CartIndex'})
}
function user(){
	router.push({name: "PersonalInfo"})
}

function getByToken () {
	post("/tUser/getByToken",{ token: VueCookie.get('token') }, content => {
		for (const key in usera) {
			if (Object.prototype.hasOwnProperty.call(content, key)) {
				usera[key] = content[key]
			}
		}
		if(content.avatar){
			usera.file=content.avatar
			headimg.value=getPath(content.avatar)
			hello.value="您好，亲爱的 "+usera.username
		}
		else{
			hello.value="您还未登录"
		}
		setCookiesFromObject('user',usera)

	})
}

</script>
<style scoped lang="scss">
/* 在样式部分添加以下代码 */
.custom-menu {
  .el-menu-item.is-active {
    background-color: #f8c27f; /* 选中背景色 */
    color: #ffffff; /* 选中文字颜色 */
    font-weight: bold; /* 选中文字加粗 */
  }
  .el-menu-item:hover {
  background-color: #f8c27f;
    color: #2c3e50;
  }
}
.quit:hover{
  color: #834c08;
  font-weight: bold;
}
.login:hover{
  color: #834c08;
  font-weight: bold;
}
.bg-container {
  height: 100vh;
  background-image: url('/src/assets/bg1.jpg');
  background-size: cover; /* 背景图覆盖整个容器 */
  background-position: center; /* 背景图居中 */
  background-repeat: no-repeat; /* 不重复显示 */
  background-attachment: fixed; /* 背景图固定，不随滚动移动 */

}
</style>